<template>
  <el-container>
  
     <el-main>
        <router-view @getMusic="getMusic"  @playMusic="playMusic" :isplay='isplay' :timelist='timelist' :musicid='musicid'></router-view>
    </el-main>
   
   <el-footer>
    <!-- 底部的播放器 -->
<div class="footer">
  <el-row> 
     
  <!-- 切换歌曲 -->
  <el-col :span="2">
    <div class="gequimg">
      <img :src="avapic" @click="toDetail()"  />
     
    </div>
  </el-col>
  <el-col :span="4" >
    <div class="ge">
    <i class="iconfont icon-shangyishou gequ" @click="changePrevMusic"></i>
     <i class="iconfont icon-zanting gequ" v-if="isplay" @click="play()"></i>
       <i class="iconfont icon-bofang gequ" v-else @click="play()"></i>
         <i class="iconfont icon-xiayishou gequ" @click="changeNextMusic"></i>
    </div>
  </el-col>
  <!-- 进度条 -->
  <el-col  :span="10" :offset="1" class="tiao">
    <div class="tiaodiv">
    <span class="timestart">{{timeStart}}</span>
    <el-slider v-model="timelist" class="timeslider" @change="timeListchange" :show-tooltip="false" :max="timemax"></el-slider>
    <span class="timeend">{{timeEnd}}</span>
    </div>
  </el-col>
  <!-- 音量控制 -->
  <el-col  :span="5" :offset="1">
    <div class="yindiv">
     <i class="iconfont icon-laba " v-if="isvoice" style="font-size:25px" @click="voicef()"></i>
     <i class="iconfont icon-shengyinjingyin" style="font-size:25px" v-else @click="voicef()"></i>
    <el-slider v-model="voice" class="voiceslider" @change="voicechange" :show-tooltip="false"></el-slider>
    </div>
  </el-col>
</el-row>
<div class="audiodiv">
<audio :src="musicUrl" ref="MusicAudio" autoplay></audio>
</div>
</div>
   </el-footer>
</el-container>
</template>
<script>

export default{
  data(){
    return{
searchcontent:"",
bannerlist:[],
musicList:[],
timelist:0,
voice:20,
isplay:true,
isvoice:true,
musicUrl:"",//音乐的地址
avatarUrl:"",
nickname:"",
showlike:false,
likedata:[],
userinfolist:{},
mylikearr:[],//我的喜欢 里面是数字
loading:false,
avapic:'',//封面
timeEnd:'',
timeStart:'',//跟踪时间进度
timemax:100,//最大进度条
timeId:-1,
musicid:"",//传递歌曲信息
timenew:"",
sessionS:""
    }
  },
 
  methods:{
  //  鼠标移入 图片显示
 
    play(){
      this.isplay=!this.isplay;
      if(this.isplay==false){
         this.$refs.MusicAudio.pause();
      }else{
        this.$refs.MusicAudio.play();
      }
     
    },
    voicef(){
      this.isvoice=!this.isvoice;
        var audio=this.$refs.MusicAudio;
      if(this.isvoice==false){
        audio.volume=0;
      }else{
        audio.volume=0.2;
        this.voice=20;
      }
    },
    voicechange(){
        var audio=this.$refs.MusicAudio;
      audio.volume= this.voice/100;
     
    },
    changePrevMusic(){
       var id= window.sessionStorage.getItem('geid');
       var List=  window.sessionStorage.getItem('Listmusic').split(',');//获取列表数组
      var index= List.findIndex((e)=>{
         return e===id;
       })-1; 
       
        var newid=List[index];
        console.log(newid);
        // 循环
       if (newid==undefined) newid=List[List.length-1];
      this.getMusic(newid);
       this.musicid=newid;
      window.sessionStorage.setItem('geid',newid);//重新设置id号
       
    },
    changeNextMusic(){
      var id= window.sessionStorage.getItem('geid');
      var List=  window.sessionStorage.getItem('Listmusic').split(',');//获取列表数组
      var index= List.findIndex((e)=>{
         return e===id;
       })+1; 
       var newid=List[index];
      //  循环
        if (newid==undefined) newid=List[0];
      this.getMusic(newid);
      this.musicid=newid;
      
      
      window.sessionStorage.setItem('geid',newid);//重新设置id号
      
    
     
    },
 
    // 切换歌曲得到歌曲的信息
    getMusic(xid){
     window.sessionStorage.setItem('geid',xid);
     
      this.musicUrl='https://music.163.com/song/media/outer/url?id='+xid+'.mp3';
      this.$axios.get(this.api+'/song/detail',{
        params:{
          ids:xid
        },
         withCredentials: true
      }).then((res)=>{
        this.isplay=true;
        this.avapic=res.data.songs[0].al.picUrl;
         this.timeEnd=this.changetime(res.data.songs[0].dt);
         this.changeslider()
      })
    },
    // 调整进度条
    changeslider(){
      var audio=this.$refs.MusicAudio;
      
      audio.addEventListener("timeupdate",()=>{
        this.timelist=audio.currentTime;
        this.timemax=audio.duration;
        this.timeStart=this.changetimese(this.timelist);
        
        if(audio.currentTime>=audio.duration){
          this.changeNextMusic()
        }
      })
    },
    // 双击表格获取歌曲的Url
    playMusic(row,arr){
      // console.log(row.id);
      this.isplay=true;
      this.musicid=row.id;
    
      window.sessionStorage.setItem('geid',row.id);//存取当前歌曲的id号
      this.$axios.get(this.api+'/song/url',{
        params:{
          id:row.id
        },
          withCredentials: true
      }).then((res)=>{
        this.musicUrl=res.data.data[0].url;
      })
      // this.musicUrl='https://music.163.com/song/media/outer/url?id='+row.id+'.mp3';
      // 直接运用文档的另一个方法，防止意外
      this.avapic=row.al.picUrl;//获取专辑图片
      this.timeEnd=this.changetime(row.dt);//获取总时间
      window.sessionStorage.setItem('Listmusic',arr);
     
    },
    timeListchange(){
       var audio=this.$refs.MusicAudio;
       audio.currentTime=this.timelist;
    },
    changetimese(time){
      var minute=Math.floor(time/60);
      if(minute<10){
        minute='0'+minute;
      }
      var second=Math.floor(time%60);
      if(second<10){
second='0'+second;
      }

      return minute+':'+second;
    },
    changetime(time){
     
      time=time/1000;
      var minute=parseInt(time/60);
      if(minute<10){
        minute="0"+minute;
      }

      var second=Math.round(time%60);
      if(second<10){
        second="0"+second;
      }

      return minute.toString()+":"+second.toString();
    },
    // 跳转页面
    toDetail(){
      // console.log(xid);
      this.$router.push('/musicdetail/'+window.sessionStorage.getItem('geid'));
    }
  }
}
</script>
<style scoped>
.iconfont :hover{
  color:red;
}
.el-footer{
/* background-color: aqua; */
position: fixed;
bottom: 0px;
}
.footer{
  background-color: #fff;
  border-radius: 10px;
  height: 8%;
  width: 76%;
  bottom: 0;
  position: fixed;
}
.ge{
  /* background-color: antiquewhite; */
  line-height:normal;
}
.yindiv{
  /* background-color: rgb(171, 171, 184); */
   line-height:normal;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

  /* background-color: rgb(124, 124, 114); */
  

.gequ{
  font-size: 40px;
  
}

.timeslider{
  width: 70%;
  margin-left: 10px;
}

.tiaodiv{
  display: flex;
  /* background-color: rgb(50, 114, 93); */
  flex-direction: row;
  justify-content: space-around;
  align-items:center;
   line-height:normal;
}
.gequimg{
  line-height: normal;
  border:1px solid #eee;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}

.gequimg img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
}
.voiceslider{
  width: 40%;
}

</style>